import { useTranslation } from "react-i18next";
import React, { useRef, useEffect } from "react";
import { CommonForm, CommonTable, BlockLayout } from "@component/index.jsx";
import "./style.less";

const RoleConfig = (props) => {
  const { t } = useTranslation();
    const commonTable = useRef(null);
  const commonForm = useRef(null);
  let formValue = {
    a: "1",
  };
  const formChange = (item, form) => {
    formValue = form;
  };
  const formList = [
    {
      name: "a",
      label: "a",
      type: "input",
    },
    {
      name: "b",
      label: "b",
      type: "select",
      options: [
        {
            label: "1",
            value: "1",
        },  
        {
            label: "2",
            value: "2",
        }, 
    ]
},
{
  name: "c",
  label: "c",
  render: (item) => {
    return <div>{item.label}</div>;
},
},

  ];
  const tableColumns = [
    {
      title: "Name",
      dataIndex: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
    },
    {
      title: "Address",
      dataIndex:"address",
    },
  ];
  const tableData = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
    },
];
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
    },
    getCheckboxProps: (record) => ({
        disabled: record.name === "Disabled User",
        name: record.name,
    }),
};
useEffect(() => {
    const initLayout = () => {
        React.$initLayout().then(({ lastBlockHeight }) => {
            var tableHeight = lastBlockHeight - 46 - 54.73 - 64 + "px";
            commonTable.current.setTableHeight(tableHeight);
        });
      };
      initLayout();
      window.addEventListener("resize", initLayout);
      return () => {
        window.removeEventListener("resize", initLayout);
    };
}, []);
return (
    <div className="container_fluid" id="container_fluid">
        <BlockLayout blockTitle={"查询条件"}>
        <div slotname="header_right">具名second-1<div>{t("router.routeConfig")}</div></div>
        <CommonForm
          slotname="default"
          ref={commonForm}
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          value={formValue}
          formList={formList}
          change={formChange}
          ></CommonForm>
        </BlockLayout>
        <BlockLayout blockTitle={"查询列表"}>
        <div slotname="header_right">具名second-1</div>
        <CommonTable
          slotname="default"
          ref={commonTable}
          tableData={tableData}
          columns={tableColumns}
          rowSelection={{
            type: "radio",
            ...rowSelection,
        }}
      />
    
    </BlockLayout>
    </div>);
};
export default RoleConfig;
    